<template>
  <div class="min-h-screen bg-gradient-to-br from-yellow-50 to-rose-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">简体/繁体转换</span>
        </h1>
        <p class="text-lg text-gray-600">中文简体与繁体相互转换，支持复制和示例加载。</p>
      </div>

      <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="mb-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">转换方向</label>
              <select v-model="direction" class="input-field">
                <option value="s2t">简体 → 繁体</option>
                <option value="t2s">繁体 → 简体</option>
              </select>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">是否保留标点/空格</label>
              <select v-model="preserve" class="input-field">
                <option :value="true">保留</option>
                <option :value="false">不处理（保持原样）</option>
              </select>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">示例</label>
              <button @click="loadSample" class="secondary-button w-full">加载示例</button>
            </div>
          </div>
        </div>

        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">输入文本</label>
          <textarea v-model="inputText" placeholder="请输入要转换的中文文本..." class="textarea-field h-36" @input="convertText"></textarea>
          <div class="mt-2 text-sm text-gray-500">字符数: {{ inputText.length }}</div>
        </div>

        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">转换结果</label>
          <textarea v-model="outputText" readonly class="textarea-field h-36 bg-gray-50" placeholder="转换后的文本将显示在这里..."></textarea>
          <div class="mt-2 flex justify-between items-center">
            <span class="text-sm text-gray-500">字符数: {{ outputText.length }}</span>
            <div class="flex gap-2">
              <button @click="copyToClipboard" class="secondary-button text-sm py-2 px-4" :disabled="!outputText">{{ copied ? '已复制' : '复制结果' }}</button>
              <button @click="swap" class="secondary-button text-sm py-2 px-4">交换</button>
            </div>
          </div>
        </div>

        <div class="flex flex-wrap gap-3">
          <button @click="convertText" class="primary-button" :disabled="!inputText">开始转换</button>
          <button @click="clearAll" class="secondary-button">清空内容</button>
        </div>
      </div>

      <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">使用说明</h3>
        <ul class="space-y-2 text-gray-600">
          <li>• 在上方输入框中粘贴或输入待转换文本</li>
          <li>• 选择转换方向（简体→繁体 或 繁体→简体），点击“开始转换”</li>
          <li>• 点击“复制结果”将转换文本复制到剪贴板</li>
          <li>• 点击“交换”可将结果放回输入以便再次转换或编辑</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import chineseConv from 'chinese-conv'

const inputText = ref('')
const outputText = ref('')
const direction = ref('s2t')
const preserve = ref(true)
const copied = ref(false)

const convertText = () => {
  if (!inputText.value) {
    outputText.value = ''
    return
  }

  let lib = chineseConv || {}
  let src = inputText.value

  // 如果不保留标点/空格，则在转换前移除它们（简单处理）
  if (!preserve.value) {
    try {
      // 使用 Unicode 属性匹配标点、符号和空白
      src = src.replace(/[\p{P}\p{S}\s]/gu, '')
    } catch (e) {
      // 若环境不支持 Unicode 属性，用较宽松的替代正则去除常见标点和空白
      src = src.replace(/[\pP\pS\s]/g, '')
    }
  }

  try {
    if (direction.value === 's2t') {
      if (typeof lib.tify === 'function') {
        outputText.value = lib.tify(src)
      } else if (typeof lib.s2t === 'function') {
        outputText.value = lib.s2t(src)
      } else if (typeof lib.toTraditional === 'function') {
        outputText.value = lib.toTraditional(src)
      } else if (typeof lib.traditionalize === 'function') {
        outputText.value = lib.traditionalize(src)
      } else if (typeof lib.simplifiedToTraditional === 'function') {
        outputText.value = lib.simplifiedToTraditional(src)
      } else {
        if (typeof lib === 'function') outputText.value = lib(src)
        else outputText.value = src
      }
    } else {
      if (typeof lib.sify === 'function') {
        outputText.value = lib.sify(src)
      } else if (typeof lib.t2s === 'function') {
        outputText.value = lib.t2s(src)
      } else if (typeof lib.toSimplified === 'function') {
        outputText.value = lib.toSimplified(src)
      } else if (typeof lib.simplify === 'function') {
        outputText.value = lib.simplify(src)
      } else if (typeof lib.simplified === 'function') {
        outputText.value = lib.simplified(src)
      } else {
        if (typeof lib === 'function') outputText.value = lib(src)
        else outputText.value = src
      }
    }
  } catch (err) {
    outputText.value = src
  }
}

const copyToClipboard = async () => {
  if (!outputText.value) return
  try {
    await navigator.clipboard.writeText(outputText.value)
    copied.value = true
    setTimeout(() => (copied.value = false), 2000)
  } catch (err) {
  }
}

const clearAll = () => {
  inputText.value = ''
  outputText.value = ''
}

const loadSample = () => {
  inputText.value = '中国的人民喜欢学习与生活。繁体测试：繁體中文測試。'
  convertText()
}

const swap = () => {
  inputText.value = outputText.value
  convertText()
}

watch([direction], () => {
  if (inputText.value) convertText()
})

useHead({
  title: '简体/繁体转换 - 八八在线工具',
  meta: [
    { name: 'description', content: '中文简体与繁体在线互转工具，支持一键复制与示例文本' },
    { property: 'og:title', content: '简体/繁体转换 - 八八在线工具' },
    { property: 'og:description', content: '中文简体与繁体在线互转工具，支持一键复制与示例文本' }
  ]
})
</script>
